<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header">
			<image class="logo" src="../../static/images/logo.png" mode=""></image>
			<view class="search">
				<text class="iconfont icon-sousuotianchong"></text>
				<input type="text" placeholder="搜索" placeholder-class="pla">
			</view>
			<button>搜索</button>
		</view>
		<!-- navBar -->
		<scroll-view class="navScroll" scroll-x="true" enable-flex>
			<view class="navItem" :class="{active:navIndex===-1}" @click="changeIndex(-1,-1)">
				推荐
			</view>
			<view class="navItem" 
				:class="{active:navIndex===index}" 
				v-for="(item,index) in indexData.kingKongModule.kingKongList" 
				:key="item.L1Id" 
				@click="changeIndex(index,item.L1Id)"
			>
				{{item.text}}
			</view>
		</scroll-view>
		<!-- 内容区 -->
		<scroll-view scroll-y="true" >
			<Recommend v-if="navIndex===-1"/>
			<CateList v-else :L1Id="L1Id"/>
		</scroll-view>
	</view>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import Recommend from '../../components/Recommend/Recommend.vue'
import CateList from '../../components/CateList/CateList.vue'
	export default {
		data() {
			return {
				navIndex: -1,
				L1Id: -1
			}
		},
		components: {
			Recommend,
			CateList
		},
		onLoad() {},
		mounted() {
			this.getIndexData()
		},
		computed: {
			// ...mapState('home',['indexData']),
			...mapState({
				indexData: state => state.home.indexData
			})
		},
		methods: {
			...mapActions('home',['getIndexData']),
			//点击切换下标
			changeIndex(index,L1Id) {
				this.navIndex = index
				// console.log('111')
				this.L1Id = L1Id
			}
		},
	}
</script>

<style lang="less">
	.content {
		.header {
			display: flex;
			padding: 10rpx 5rpx;
			.logo {
				width: 140rpx;
				height: 40rpx;
				margin: 10rpx;
			}
			.search {
				width: 420rpx;
				height: 60rpx;
				background-color: #f5f5f5;
				position: relative;
				.pla {
					font-size: 26rpx;
				}
				input {
					width: 360rpx;
					height: 60rpx;
					// border: 1rpx solid #ccc;
					margin-left: 60rpx;
				}
				.iconfont {
					position: absolute;
					font-size: 40rpx;
					left: 10rpx;
					top: 10rpx;
				}
			}
			button {
				width: 144rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 26rpx;
				padding: 0 4rpx;
			}
		}
		.navScroll {
			display: flex;
			white-space: nowrap;
			height: 80rpx;
			.navItem {
				height: 40rpx;
				padding: 10rpx;
				font-size: 26rpx;
				&.active {
					border-bottom: 3rpx solid #BB2C08;
					color: #BB2C08;
				}
			}
		}
	}
</style>
